<!-- 供应商对账看板 -->

<script setup>

import {ref} from "vue";
import CommonBox from "../../components/CommonBox.vue";
import CheckingFunnel from "./CheckingFunnel.vue";
import SupplierChart from "./SupplierChart.vue";

const tableData = ref([{
  purchaseNumber: 'K250000001',
  supplier: '华为',
  materialAmount: 10000,
  inAmount: 10000,
  checkAmount: 10000,
  noCheckAmount: 10000,
  invoiceAmount: 10000,
  noInvoiceAmount: 10000,
  payAmount: 10000,
  noPayAmount: 10000,
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  materialAmount: 10000,
  inAmount: 10000,
  checkAmount: 10000,
  noCheckAmount: 10000,
  invoiceAmount: 10000,
  noInvoiceAmount: 10000,
  payAmount: 10000,
  noPayAmount: 10000,
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  materialAmount: 10000,
  inAmount: 10000,
  checkAmount: 10000,
  noCheckAmount: 10000,
  invoiceAmount: 10000,
  noInvoiceAmount: 10000,
  payAmount: 10000,
  noPayAmount: 10000,
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  materialAmount: 10000,
  inAmount: 10000,
  checkAmount: 10000,
  noCheckAmount: 10000,
  invoiceAmount: 10000,
  noInvoiceAmount: 10000,
  payAmount: 10000,
  noPayAmount: 10000,
}]);

function tableRowClassName(rowIndex){

  if (rowIndex.rowIndex % 2 !== 0) {
    console.log('rowIndex',rowIndex.rowIndex)
    return 'evenRow';
  }
  return 'oddRow';
}
</script>

<template>
  <div class="head">
    <h1>财务对账</h1>
  </div>

  <div class="board-row">

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            订单总金额
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            已入库总金额
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            已对账总金额
          </div>
        </div>
      </div>
    </common-box>

    <common-box>
      <div class="box">
        <div class="vitas-data">
          <div class="vitas-content">
            已付款总金额
          </div>
        </div>
      </div>
    </common-box>

  </div>

  <div class="board-row">

    <checking-funnel></checking-funnel>

    <supplier-chart></supplier-chart>

  </div>


  <div class='moduleTable'>
    <!-- //设置表格头的样式和字体 -->
    <el-table :data="tableData"  style="width: 100%;margin:0 auto; padding: 17px 0;
                --el-table-border-color: none;
                --el-table-bg-color: none;
                --el-table-tr-bg-color: none"
              :row-class-name='tableRowClassName'
              :cell-style="{'color':'#FFFFFF','text-align':'center'}"
              :header-cell-style="{'background':'#375A88','color':'rgba(2,217,253,0.8)','text-align':'center'}"
    >
      <el-table-column prop="purchaseNumber" label="采购单号" />
      <el-table-column prop="supplier" label="供应商"  />
      <el-table-column prop="materialAmount" label="原材料总金额" />
      <el-table-column prop="inAmount" label="已入库总金额" />
      <el-table-column prop="checkAmount" label="已对账总金额" />
      <el-table-column prop="noCheckAmount" label="未对账总金额" />
      <el-table-column prop="invoiceAmount" label="已开票总金额" />
      <el-table-column prop="noInvoiceAmount" label="未开票总金额" />
      <el-table-column prop="payAmount" label="已付款总金额" />
      <el-table-column prop="noPayAmount" label="未付款总金额" />
    </el-table>
  </div>
</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}


.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 10em;
  height: 10em;
  justify-content: center;
  align-items: center;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.boxall {
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenRow {
  background: transparent !important;
}
.oddRow{
  background:transparent !important;
}


.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>